<template>
    <div class="bg page-orderdetail empty">
	    <div v-if="detail.order" class="cont">
	    	<div class="title">
	    		<b>订单号:&nbsp;&nbsp;{{detail.orderNO}}</b>
	    		<span>{{getName[detail.orderStatus]}}</span>
	    	</div>
	    	
	    	<div v-if="adminstatus" class="shop detail">
	    		<ul>
	    			<li>
	    				<label>店名:</label>
	    				<p>{{detail.companyName}}</p>
	    			</li>
	    			<li>
	    				<label>店号:</label>
	    				<p>{{detail.venderNo}}</p>
	    			</li>
	    			<li>
	    				<label>联系人:</label>
	    				<p>{{detail.venderContactName}}</p>
	    			</li>
	    			<li>
	    				<label>电话:</label>
	    				<p class="em">{{detail.mobile}}</p>
	    			</li>
	    		</ul>
	    	</div>
	    	
	    	<div class="detail">
	    		<ul>
	    			<li>
	    				<label>服务类型:</label>
	    				<p class="em">{{detail.servcatName}}</p>
	    			</li>
	    			<li>
	    				<label>服务明细:</label>
	    				<p>{{serveDetail}}</p>
	    			</li>
	    			<li>
	    				<label>预期进场时间:</label>
	    				<p>{{getDate(detail.expectInDate)}}</p>
	    			</li>
	    			<li v-if="detail.orderStatus=='SUBMITED'">
	    				<label>预计合同期限:</label>
	    				<p>{{detail.contractYear}}</p>
	    			</li>
	    		</ul>
	    		<ul>
	    			<li>
	    				<label>提交时间:</label>
	    				<p>{{getFullTime(detail.createTime)}}</p>
	    			</li>
	    		</ul>
	    	</div>
		    <div v-if="detail.orderStatus!='SUBMITED'&&detail.orderStatus!='NOT_COOPERATION'" class="detail contract">
		    	<ul>
					<li>
						<label>合同号:</label>
						<p>{{detail.contractNO}}</p>
					</li>
					<li>
						<label>合同时间:</label>
						<p>{{getDate(detail.contractStartDate)}} - {{getDate(detail.contractEndDate)}}</p>
					</li>
					<li>
						<label>合同金额:</label>
						<p>￥{{detail.contractAmount}}</p>
					</li>
					<li>
						<label>服务面积:</label>
						<p>{{detail.servArea}}</p>
					</li>
					<li>
						<label>服务商:</label>
						<p>{{detail.venderName}}</p>
					</li>
					<li>
						<label>备注:</label>
						<p>{{detail.contractRemark}}</p>
					</li>
				</ul>
		    </div>
		    
		    <div v-if="appraiseStar" class="appraise">
		    	<label>评价信息</label>
		    	<ul class="clearFix">
		    		<li key="{n}" v-for="n in 5" :class="[n<=appraiseNum?'ef':'']"></li>
		    	</ul>
		    </div>
		    
		    <div v-if="appraiseStatus&&!adminstatus" class="putappraise">
				<router-link :to="{ name: 'OrderAppraise', query: { orderId: detail.id }}">马上评价</router-link>
			</div>
		    
		    <!--<div class="feedback">
		    	<h3>反馈意见</h3>
		    	<p>傻大姐夫连空间阿斯达，六块腹肌安科思烂大街，了是块级爱的回复卡萨丁</p>
		    </div>-->
	    </div>
    
    	
    </div>
</template>

<script>

import http from '../services/http';
import { mapState } from 'vuex';

export default {
	name:'order-detail',
    data() {
      return {
      	getName:{
      		'SUBMITED': '已提交',
			'NOT_COOPERATION': '合作未达成',
			'EXPECT_SERVE': '待服务',
			'COMPLETED': '已完成',
			'SERVING': '服务中',
      	},
      	appraiseNum: 3,
      	detail: {},
      	serveDetail: "",
      	appraiseStatus: false,
      	appraiseStar: false,
      }
    },
    props:{
		toast:{
			type: Function,
			required: true
		},
	},
	computed:{
		...mapState({
			adminstatus:state => state.user.usertype=="isp_provider_user"?false:true,
		})
	},
	methods:{
		getFullTime(timeString=null){
    		if(!timeString)return "";
    		const time = new Date(timeString);
    		return `${time.toLocaleDateString().replace(/\//g,".")} ${time.getHours()} ${time.getMinutes()}`;
    	},
    	getDate(timeString=null){
    		if(!timeString)return "";
    		const time = new Date(timeString);
    		return time.toLocaleDateString().replace(/\//g,".");
    	},
	},
    mounted() {
    	const {orderId} = this.$route.query;
    	let serveDetail = "";
    	const deep = arr => {
			if(arr.length<=0){return false;};
			arr.forEach(item=>{
				serveDetail+=item.name+'。';
				if(item.children){
					deep(item.children);
				}
			})
		};
    	http.get(`/isp/api/v1/protected/order/{&{id}}`,{
    		id:orderId
    	},redata=>{
    		if(redata.success){
    			this.detail = {...redata.data};
    			
    			deep(this.detail.ispServ);
    			this.serveDetail = serveDetail;
    			if(this.detail.orderStatus =='COMPLETED'){
    				if(!this.detail.order.assessment){
    					this.appraiseStatus = true;
    				}else{
    					this.appraiseNum = parseInt(this.detail.order.assessment);
    					this.appraiseStar = true;
    				}
    			}
    		}
    	})
    	
    	
    },
};
	
	
	 
	
</script>

<style lang="scss">
.page-orderdetail{
	min-height: 100%;
	background: #f5f5f5;
	padding-top: 10px;
	padding-bottom: 70px;
	
	
	.cont{
		width: 100%;
		
		.title{
			height: 45px;
			line-height: 45px;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 1rem;
			padding: 0 10px;
			background: #ffffff;
			margin-bottom: 10px;
			border-bottom: solid 1px #e6e6e6;
		
			b{
				font-weight: 600;
				color: #434a4d;
			}
			span{
				color: #4cb0b6;
				display: block;
				height: 100%;
				float: right;
			}
		}
		.detail{
			margin-bottom: 10px;
			background: #ffffff;
			padding: 0 10px;
			border-bottom: solid 1px #e6e6e6;
		
			ul{
				border-bottom: solid 1px #e6e6e6;
				padding: 10px 0;
				font-size: 0.95rem;
				&:last-child{border: none;}
				
				li{
					padding: 4px 0;
					width: 100%;
					position: relative;
					display: table;
					
					label{
					    display: table-cell;
    					vertical-align: top;
    					white-space: nowrap;
    					padding-right: 10px;
    					color: #979797;
    					min-width: 75px;
					}
					p{
					    display: table-cell;
    					vertical-align: top;
    					text-align: left;
    					width: 100%;
    					line-height: 1.2em;
    					color: #666666;
    					&.em{
    						color: #aa875e;
    					}
					}
				}
			}
			
			.contact{
				height: 45px;
				line-height: 45px;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 0.9rem;
				label{
					color: #979797;
					float: left;
				}
				span{
					color: #2dbe60;
					display: block;
					float: right;
					padding-left: 20px;
					height: 100%;
					cursor: pointer;
					background: transparent url(../assets/img/icon/icon_phone.png) no-repeat left center / 16px auto;
				}
			}
			.appraise{
				height: 45px;
				line-height: 45px;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 0.9rem;
				
				a{
					background: #2dbe60;
					text-align: center;
					padding: 5px 10px;
					border-radius: 15px;
					color: #ffffff;
					display: block;
					line-height: 20px;
					float: right;
					margin-top: 7px;
				}
			}
			
			&.shop{
				
				ul{
					border: none;
					li .em{color: #2dbe60;}
				}
			}
		}
		
		.putappraise{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 65px;
			line-height: 65px;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 0.9rem;
			background: #ffffff;
			box-shadow: 0px 0px 7px 0px #bbbbbb;
			
			a{
				color: #2dbe60;
				display: block;
				height: 100%;
				width: 100%;
				font-size: 0.937rem;
				font-weight: 600;
				text-align: center;
			}
		}
		
		.appraise{
			position: relative;
			padding: 10px;
			padding-left: 90px;
			background: #ffffff;
			margin-bottom: 10px;
			
			label{
				position: absolute;
				left: 10px;
				top: 10px;
				display: block;
				height: 30px;
				line-height: 30px;
				font-size: 1rem;
				color: #434a4d;
				font-weight: 600;
			}
			ul{
				min-height: 30px;
				width: 100%;
				background: #ffffff;
				white-space: nowrap;
				text-align: left;
				
				li{
					width: 40px;
					height: 30px;
					float: left;
					display: inline-block;
					background: transparent url(../assets/img/icon/star_1.png) no-repeat center/ 20px auto;
					
					&.ef{
						background: transparent url(../assets/img/icon/star_2.png) no-repeat center/ 20px auto;
					}
				}
			}
		}
		
		.feedback{
			padding: 0 10px;
			background: #ffffff;
			border-bottom: solid 1px #e6e6e6;
			
			h3{
				height: 50px;
				line-height: 50px;
				font-size: 1rem;
				color: #434a4d;
				font-weight: 600;
				border-bottom: solid 1px #e6e6e6;
			}
			p{
				width: 100%;
				color: #666666;
				font-size: 0.9rem;
				line-height: 1.3em;
				padding: 10px 0;
			}
		}
	}
	
	
}
	
</style>
